<template>
  <AplidCharts ref="chart" type="bar" :option="option"></AplidCharts>
</template>

<script setup lang="ts">
import { ref, reactive, toRefs, onMounted } from "vue";
import * as echarts from "echarts/core";
import AplidCharts from "@/components/AplidCharts/index.vue";

let chart = ref();
let labelData1 = ["玄武区", "秦淮区", "建邺区", "鼓楼区", "雨花台区", "栖霞区"];
let valueData1 = [349, 1627, 468, 4529, 196, 349];
let labelData2 = ["江宁区", "浦口区", "六合区", "溧水区", "高淳区", "江北新区"];
let valueData2 = [825, 65, 71, 71, 74, 548];
let labelData = ref(labelData1);
let valueData = ref(valueData1);

let option = {
  grid: {
    top: 40,
    bottom: 40,
    left: 40,
    right: 40,
  },
  tooltip: {
    trigger: "axis",
    axisPointer: {
      lineStyle: {
        color: "rgba(255,255,255,.5)",
      },
    },
    backgroundColor: "rgba(33, 51, 67, 1)",
    borderColor: "rgba(255,255,255,0)",
    textStyle: {
      color: "#fff",
    },
    formatter: function (data) {
      let html = ``;
      html = `
          <div>${data[0].marker} ${data[0].name}: ${data[0].value}</div>
          `;
      return html;
    },
  },
  calculable: true,
  legend: {
    show: false,
  },
  xAxis: [
    {
      type: "category",
      axisLabel: {
        interval: 0,
        rotate: 40,
        show: true,
        textStyle: {
          color: "#fff",
        },
      },
      data: labelData.value,
    },
  ],
  yAxis: [
    {
      type: "value",
      name: "",
      axisLabel: {
        formatter: "{value}",
        textStyle: {
          color: "#fff",
        },
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: "#2B4357",
          type: "dashed",
        },
      },
    },
  ],
  series: [
    {
      name: "百分比",
      type: "bar",
      barWidth: "24px",
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: "#1978E5FF" },
          { offset: 1, color: "#1978E500" },
        ]),
      },
      data: valueData.value,
      emphasis: {
        label: {
          show: true,
          color: "white",
          position: "top",
        },
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "#00D5FFFF" },
            { offset: 1, color: "#00D5FF00" },
          ]),
        },
      },
    },
  ],
};
let dsq = setInterval(() => {
  if (labelData.value[0] == labelData1[0]) {
    labelData.value = labelData2;
    valueData.value = valueData2;
    option.xAxis[0].data = labelData2;
    option.series[0].data = valueData2;
  } else {
    option.xAxis[0].data = labelData1;
    option.series[0].data = valueData1;
    labelData.value = labelData1;
    valueData.value = valueData1;
  }
  chart.value.setOptions(option);
}, 17000);

onUnmounted(() => {
  clearInterval(dsq);
});
</script>
<style scoped lang="scss"></style>
